import { RouteRecordRaw } from "vue-router"

// import About from '@/pages/About.vue'
// import Home from '@/pages/Home.vue'
// 静态引入, 没有懒加载
import News from '@/pages/News.vue'
import Message from '@/pages/Message.vue'
import MessageDetail from '@/pages/MessageDetail.vue'

// 路由懒加载
const About = () => import('@/pages/About.vue')
const Home = () => import('@/pages/Home.vue')

const routes: RouteRecordRaw[] = [
  // 路由
  {
    path: '/about',
    component: About
  },
  {
    path: '/home', // path最左边的/代表项目根路径
    component: Home,
    children: [ // 注册子路由
      {
        name: 'news',
        path: '/home/news',
        component: News
      },
      {
        path: 'message',  // 相当于: /home/message
        component: Message,
        children: [
          {
            name: 'detail',
            path: '/home/message/detail/:id',   // 动态路由
            component: MessageDetail,
            // props: true, // 内部自动将接收的parmas参数以标签属性传入路由组件
            props: (route) => ({id: +route.params.id, name: route.query.name})  // 函数返回的对象中的所有属性都会以标签属性传入路由组件
          }
        ]
      },
      {
        path: '',
        redirect: '/home/news'
      }
    ]
  },
  
  // 自动重定向的路由
  {
    path: '/',
    redirect: '/about'
  }
]

export default routes